const merge = require('webpack-merge');
//webpack打包管理工具
const webpack = require('webpack');
const common = require('../webpack.config.js');
const PROJECT = require('./project.config.js');
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
//VueLoader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = merge(common, {
    mode: PROJECT.ENV_DEV,
    devtool: 'inline-source-map',
    //https://doc.webpack-china.org/configuration/dev-server    
    devServer: {
        // publicPath: PROJECT.BASE_URL, // 和 baseUrl 保持一致
        //编译工作目录
        contentBase: PROJECT.PATH_DIST,
        // progress: true,
        //是否默认打开
        open: true,
        // 启用gzip压缩
        compress: true,
        // 告诉服务器从哪里提供内容
        contentBase: PROJECT.PATH_SRC,
        // 当使用HTML5 History API，任意的 404 响应可以提供为 index.html 页面
        // historyApiFallback: true,
        // 构建消息将会出现在浏览器控制台
        // inline: true,
        // 告诉服务器监视那些通过 devServer.contentBase 选项提供的文件。文件改动将触发整个页面重新加载
        // watchContentBase: true,
        // //与监视文件无关的控制选项
        // watchOptions: {
        //     ignored: /node_modules/,
        // },
        // 指定使用一个 host
        host: PROJECT.SERVER_HOST,
        // 指定要监听请求的端口号
        port: PROJECT.SERVER_PORT,
        // 遮罩层提示错误
        // overlay: true,
        // quiet: true,
        // disableHostCheck: true
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: PROJECT.PATH_NODE
            },
            {
                //当webpack 编译过程中遇到require（）或import 语句导入一个后缀
                //名为. css 的文件时， 先将它通过css-loader 转换， 再通过styl e-load er 转换，然后继续打包。u se 选
                //项的值可以是数组或字符串， 如果是数组， 它的编译顺序就是从后往前。
                test: /\.css$/,
                use: ["vue-style-loader", "css-loader"] //MiniCssExtractPlugin.loader
            },
            {
                test: /\.svg$/,
                loader: 'svg-sprite-loader',
                include:PROJECT.PATH_SVG
            },
            //图片 loader
            {
                test: /\.(png|jpg|gif|jpeg|svg)(\?.*)?$/,  //是匹配图片文件后缀名称
                use: [{
                    loader: 'url-loader', //是指定使用的loader和loader的配置参数
                    options: {
                        limit: 500, //是把小于500B的文件打成Base64的格式，写入JS
                        outputPath: 'images/' ///打包后的图片放到images文件夹下
                    }
                }],
                exclude:PROJECT.PATH_SVG
            },
            {
                test: /\.js$/,
                use: ["babel-loader"],
                exclude: PROJECT.PATH_NODE
            },
            //less loader
            {
                test: /\.less$/,
                use: ["vue-style-loader", "css-loader", "less-loader"]//MiniCssExtractPlugin.loader
            },
            //less loader
            {
                test: /\.scss$/,
                use: ["vue-style-loader", "css-loader", "sass-loader"]//MiniCssExtractPlugin.loader
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash].[ext]'
                }
            }
        ]

    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        // 定义当前 node 环境为生产环境
        // new webpack.DefinePlugin({
        //     'process.env': {
        //         NODE_ENV: PROJECT.ENV_DEV
        //     }
        // })
        // 用于模块热替换，适用于开发环境
        //https://doc.webpack-china.org/guides/hot-module-replacement
        // new webpack.HotModuleReplacementPlugin(),
        // 第三方插件，优化提示效果
        // https://github.com/geowarin/friendly-errors-webpack-plugin
        new FriendlyErrorsPlugin()
    ]
})